<template>
  <div id="storeMessage" :style="{
    marginTop:styles.marginTop+'px',
    marginBottom:styles.marginBottom+'px',
    marginLeft:styles.marginLR+'px',
    marginRight:styles.marginLR+'px',
    }">
    <ul  class="store-list nui-scroll">
      <li v-for="i in 10" :key="i">
        <el-image style="width: 80px; height: 80px;border-radius:50%" :src="img" fit="cover"></el-image>
        <p class="line-one-p">XXXXXxxxxxxx旗航店</p>
        <span class="btn">进店逛逛</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "storeMessage",
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
    };
  },
  props: ["styles"],
};
</script>

<style lang='less' scoped>
@import url("../../../assets/css/base.less");
#storeMessage {
  margin-top: 10px;
  overflow: hidden;
  .store-list {
    width: 370px;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    > li {
      text-align: center;
      border: 1px solid #eee;
      background-color: #fff;
      padding: 10px 5px 15px;
      margin-right: 10px;
      width: 117px;
      > p {
        margin: 10px 0;
      }
      > .btn {
        border: 1px solid red;
        padding: 5px 10px;
        color: red;
        font-size: 12px;
        border-radius: 5px;
      }
    }
  }
}
</style>
